package com.fanketly.musicdiary.ui.components

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Divider
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import coil.compose.AsyncImage
import com.fanketly.musicdiary.data.model.MusicModel
import com.fanketly.musicdiary.domain.MusicViewModel
import com.fanketly.musicdiary.ui.theme.*
import com.lzx.starrysky.SongInfo

@Composable
fun MusicList(
    bottomAppBarHeight: Dp,
    list: List<MusicModel>,
    onClick: (music: SongInfo) -> Unit
) {
    CommonList(list = list, bottomAppBarHeight = bottomAppBarHeight, key = { it.musicID }) { item ->
        MusicCardItem(
            musicModel = item,
            modifier = Modifier
                .padding(
                    start = LargeDimen,
                    end = LargeDimen,
                    top = MediumDimen,
                    bottom = MediumDimen
                )
                .fillMaxWidth()
                .clickableCustomIndication(
                    onClick = { onClick.invoke(item.musicInfo) })
        )
        Divider(
            Modifier
                .padding(
                    start = LargeDimen,
                    end = LargeDimen,
                ), color = H2Color
        )
    }
}

@Composable
fun MusicCardItem(
    modifier: Modifier,
    musicModel: MusicModel,
    viewModel: MusicViewModel = hiltViewModel()
) {
    val musicInfo = musicModel.musicInfo
    Surface(modifier = modifier, color = BlackBackgroundColor) {
        Column {
            Row(verticalAlignment = Alignment.CenterVertically) {
                AsyncImage(
                    modifier = Modifier
                        .size(48.dp)
                        .padding(SmallDimen)
                        .clip(CircleShape), model = musicInfo.songCover,
                    contentDescription = null
                )
                Column(Modifier.padding(start = SmallDimen)) {
                    Text(
                        style = MaterialTheme.typography.h2,
                        fontWeight = FontWeight.Bold,
                        fontSize = 18.sp,
                        color = TextWhite,
                        text = musicInfo.songName
                    )
                    Text(
                        style = MaterialTheme.typography.subtitle2,
                        color = H2Color,
                        fontSize = 14.sp,
                        text = musicInfo.artist
                    )
                }
                Spacer(modifier = Modifier.weight(1f))
//                if (diaryModel.musicUrl.isNotEmpty()) Icon(
//                    imageVector = Icons.Filled.MusicNote,
//                    modifier = Modifier
//                        .size(36.dp)
//                        .padding(end = MediumDimen)
//                        .clickableCustomIndication() {
//                            viewModel.playMusicByUrl("http://music.163.com/song/media/outer/url?id=317151.mp3")
//                        },
//                    tint = ImageColor,
//                    contentDescription = "music"
//                )
            }
        }
    }
}